<template>
  <div class="js-navmenu js-footer-auto-ele shop-nav nav-menu nav-menu-1 has-menu-2">
    <div class="nav-special-item nav-item" style="width:16%"><a
            href="###" class="home">主页</a>
    </div>
    <div @click="navitemclick('find')" class="nav-item" style="width:28%"><a class="mainmenu js-mainmenu"
                                                                             href="javascript:void(0);"> <i
            class="arrow-weixin"></i> <span class="mainmenu-txt">找房</span> </a>
      <div class="submenu js-submenu" v-show="name=='find'" style="opacity: 1;"><span
              class="arrow before-arrow" style="left: 53px; right: auto;"></span> <span class="arrow after-arrow"
                                                                                        style="left: 53px; right: auto;"></span>
        <ul>
          <li><a :href="homeUrl"> 首页 </a></li>
          <li class="line-divide"></li>
          <li>
            <a :href="SecondHouseUrl">
              二手房 </a></li>
          <li class="line-divide"></li>
          <li>
            <a :href="RentingHouseUrl">
              租房 </a></li>
          <li class="line-divide"></li>
          <li>
            <a :href="newHouseUrl">
              新房 </a></li>
          <li class="line-divide"></li>
          <li><a :href="mapFindHouse"> 地图找房 </a>
          </li>
        </ul>
      </div>
    </div>
    <div @click="navitemclick('weituo')" class="nav-item" style="width:28%"><a class="mainmenu js-mainmenu"
                                                                               href="javascript:void(0);"> <i
            class="arrow-weixin"></i> <span class="mainmenu-txt">委托</span> </a>
      <div v-show="name=='weituo'" class="submenu js-submenu" style="opacity: 1; ">
        <span
                class="arrow before-arrow" style="left: 53px; right: auto;"></span> <span class="arrow after-arrow"
                                                                                          style="left: 53px; right: auto;"></span>
        <ul>
          <li><a :href="RentingUrl">
            租房登记 </a></li>
          <li class="line-divide"></li>
          <li><a :href="buyHouseUrl">
            买房登记 </a></li>
          <li class="line-divide"></li>
          <li><a :href="HaveHouseSell">
            有房出售 </a></li>
          <li class="line-divide"></li>
          <li><a :href="HouseToLet">
            有房出租 </a></li>
        </ul>
      </div>
    </div>
    <div @click="navitemclick('about')" class="nav-item" style="width:28%"><a class="mainmenu js-mainmenu"
                                                                              href="javascript:void(0);"> <i
            class="arrow-weixin"></i> <span class="mainmenu-txt">关于</span> </a>
      <div class="submenu js-submenu" v-show="name=='about'" style="opacity: 1;  left: auto; right: 8px;"><span
              class="arrow before-arrow" style="left: auto; right: 44px;"></span> <span class="arrow after-arrow"
                                                                                        style="left: auto; right: 44px;"></span>
        <ul>
          <li>
            <a href="https://mp.weixin.qq.com/s?__biz=Mzg2MzAwMDEzNg==&mid=100000010&idx=1&sn=7e5cb5de3aff73925b5ca6f82ee562ea&scene=19#wechat_redirect">
              一键关注 </a></li>
          <li class="line-divide"></li>
          <li><a href="https://tool.fooww.com/calculator/mobile/?themeColor=3492e9"> 贷款计算 </a></li>
          <li class="line-divide"></li>
          <li>
            <a :href="companyUrl">
              公司 </a></li>
          <li class="line-divide"></li>
          <li><a :href="storeUrl">
            门店 </a></li>
          <li class="line-divide"></li>
          <li><a href="tel:15272825756"> 电话 </a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {jumpUrlConfig} from 'src/const/jumpUrlConfig'

  export default {
    name: "TabFooter",
    data() {
      return {
        name: '',

        homeUrl: jumpUrlConfig.homeUrl,
        SecondHouseUrl: jumpUrlConfig.SecondHouseUrl,
        RentingHouseUrl: jumpUrlConfig.RentingHouseUrl,
        newHouseUrl: jumpUrlConfig.newHouseUrl,
        mapFindHouse: jumpUrlConfig.mapFindHouse,

        storeUrl: jumpUrlConfig.storeUrl,
        companyUrl: jumpUrlConfig.companyUrl,

        RentingUrl: jumpUrlConfig.RentingUrl,
        buyHouseUrl: jumpUrlConfig.buyHouseUrl,
        HaveHouseSell: jumpUrlConfig.HaveHouseSell,
        HouseToLet: jumpUrlConfig.HouseToLet
      }
    },
    methods: {
      navitemclick(name) {
        //console.log(name);
        if (this.name == name) {
          this.name = '';
        } else {
          this.name = name;
        }

      }
    }

  }
</script>

<style scoped>

  a {
    color: #333;
    background: transparent;
    text-decoration: none
  }

  .arrow-weixin {
    background: url("../../static/img/tabFooter/icon_menu.png") no-repeat scroll 0 0;
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
    vertical-align: text-bottom
  }

  .home {
    display: inline-block;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    background: url("../../static/img/tabFooter/icon_home2.png") no-repeat scroll center center;
    background-size: 24px 24px;
    text-indent: -10000px;
    height: 40px;
    vertical-align: top
  }

  .home:hover {
    color: #333
  }

  .nav-menu {
    border: 0px none;
    cursor: default;
    font-size: 0;
    line-height: 0
  }

  .nav-menu .arrow-caret {
    display: inline-block;
    vertical-align: text-bottom;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 6px 6px;
    border-color: transparent transparent #999 transparent;
    opacity: 0.3
  }

  .nav-menu .mainmenu .arrow-weixin {
    margin-right: 0
  }

  .nav-menu .mainmenu .arrow-weixin, .nav-menu .mainmenu .mainmenu-txt {
    font-size: 14px;
    line-height: 50px;
    display: inline-block;
    vertical-align: middle
  }

  .nav-menu .submenu {
    display: block;
    position: absolute;
    padding: 5px 8px;
    background: #eaeaea;
    text-align: left;
    border-radius: 5px;
    font-size: 14px;
    line-height: 41px;
    z-index: 11
  }

  .nav-menu .submenu .before-arrow {
    position: absolute;
    z-index: 11;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent
  }

  .nav-menu .submenu .after-arrow {
    position: absolute;
    z-index: 10;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent
  }

  .nav-menu .submenu ul > li {
    line-height: 20px;
    text-align: center
  }

  .nav-menu .submenu ul > li a {
    min-width: 61px;
    max-width: 240px;
    display: block;
    padding: 10px 0;
    white-space: nowrap;
    overflow: hidden
  }

  .nav-menu-4.nav-show .nav-special-item, .nav-menu-5.nav-show .nav-special-item {
    -webkit-transform: rotateZ(135deg);
    -moz-transform: rotateZ(135deg);
    transform: rotateZ(135deg)
  }

  .shop-nav {
    position: fixed;
    z-index: 99
  }

  .nav-menu .nav-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }

  .nav-menu a {
    display: block;
    height: 100%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat
  }

  .nav-menu-1, .nav-menu-2, .nav-menu-3 {
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    background: #eaeaea;
    color: #eee;
    text-align: center
  }

  .nav-menu-1 {
    border: 0px none;
    border-top: 2px solid #dcdcdc;
    background: no-repeat #fafafa;
    background-size: 100% 100px;
    height: 50px
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
    .nav-menu-1 {
      border-top-width: 1px
    }
  }

  .nav-menu-1 a {
    display: block;
    color: #333;
    text-shadow: 0 0 2px #f5f5f5
  }

  .nav-menu-1 .nav-item {
    float: left;
    display: block;
    height: 50px
  }

  .nav-menu-1 .nav-item + .nav-item {
    border-left: 2px solid #dcdcdc;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
    .nav-menu-1 .nav-item + .nav-item {
      border-left-width: 1px
    }
  }

  .nav-menu-1 .nav-special-item a {
    background-size: 25px 25px;
    margin: 0 auto
  }

  .nav-menu-1 .submenu {
    bottom: 54px;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 0 3px #fff inset;
    box-shadow: 0 0 3px #fff inset;
    background-color: #fafafa
  }

  .nav-menu-1 .submenu .before-arrow {
    border-top: 6px solid #fafafa;
    border-bottom: 0px none;
    bottom: -5px
  }

  .nav-menu-1 .submenu .after-arrow {
    border-top: 6px solid #ccc;
    border-bottom: 0px none;
    bottom: -6px
  }

  .nav-menu-1 .submenu a, .nav-menu-1 .submenu .arrow-caret {
    color: #333;
    font-weight: bold;
    text-shadow: 0 0 2px #f5f5f5
  }

  .nav-menu-1 .submenu .arrow-caret {
    border-color: transparent transparent #333 transparent
  }

  .nav-menu-1 .submenu ul > li.line-divide {
    border-top: 2px solid #dcdcdc;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
    .nav-menu-1 .submenu ul > li.line-divide {
      border-top-width: 1px
    }
  }

  .nav-menu-1.has-menu-2 .submenu li a {
    min-width: 100px
  }

  .full-screen .container {
    background: none
  }

  .full-screen .header {
    display: none
  }

</style>